<template>
    <div
        class="input-range-wrap">
        <input
            v-model="value[0]"
            :type="type"
            :placeholder="placeholders[0]"
            @blur.prevent="fnBlur()">
        <div class="spliter">{{ spliter }}</div>
        <input
            v-model="value[1]"
            :type="type"
            :placeholder="placeholders[1]"
            @blur.prevent="fnBlur()">
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        value: {
            type: Array,
            required: true
        },
        spliter: {
            type: String,
            default: '~'
        },
        placeholders: {
            type: Array,
            default: () => {
                return ['',''];
            }
        },
        type: {
            type: String,
            default: 'text'
        }
    },
    data() {
        return {
        };
    },
    computed: {
        min: {
            set(val){
                this.$emit('change', [val, this.value[1]]);
            },
            get(){
                return this.value[0];
            }
        },
        max: {
            set(val){
                this.$emit('change', [this.value[0], val]);
            },
            get(){
                return this.value[1];
            }
        }
    },
    methods: {
        fnBlur(){
            console.log('fdsfd');
            this.$emit('blur');
        }
    },
    created(){
    }
};

</script>

<style lang="less" scoped>
.input-range-wrap{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 4px;
    border: 1px solid rgb(220, 223, 230);
    padding: 0 15px;
    line-height: 32px;
    input{
        width: calc(50% - 20px);
        line-height: 22px;
        outline: none;
    }
    .spliter{
        width: 40px;
        text-align: center;
    }
}
</style>